<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0"><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />   
        <title>Welcome to Design Zone......</title>
        <link rel="stylesheet" type="text/css" href="../../scripts/ext/resources/css/ext-all.css" />
        <link rel="stylesheet" type="text/css" href="../../scripts/ext/resources/css/file-upload.css" />
        <link rel="stylesheet" type="text/css" href="../../styles/dzbase.css" />
        <script type="text/javascript" src="../../scripts/ext/adapter/ext-base.js">
        </script>
        <script type="text/javascript" src="../../scripts/ext/ext-all.js">
        </script>
		<script type="text/javascript" src="../../scripts/menu/EditableItem.js">
        </script>
        <script type="text/javascript" src="../../scripts/menu/RangeMenu.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/GridFilters.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/filter/Filter.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/filter/StringFilter.js">
        </script>
        <script type="text/javascript" src="../../scripts/grid/filter/ListFilter.js">
        </script>
        <script type="text/javascript" src="../../scripts/form/FileUploadField.js">
        </script>
        <script type="text/javascript" src="../../scripts/i18nMessage.js">
        </script>
        <script type="text/javascript" src="../../scripts/utils.js">
        </script>
		<script type="text/javascript" src="../../scripts/multiSelectAcAction.js">
        </script>
        <script type="text/javascript">
            var acMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.accesscontrol');
            var message = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=message');
			var ctYesnoXmlLoader = new xmlLoader('../../servlet/CodeTableServlet?name=CtYesno');
            
            var idValue = getPrarmeterValue(window.location, 'id');
            var startPage = getPrarmeterValue(window.location, 'startPage');
            
			
			var acUserActionForm
            var acUserActionListStore;
            var acUserActionGrid;
			
			var ctYesnoStore = new Ext.data.Store({
                reader: new Ext.data.XmlReader({
                    record: 'item',
                    id: 'code',
                    totalRecords: 'itemTotal'
                }, ['code', 'description']),
                data: ctYesnoXmlLoader.getXml()
            });
			
			var isValidCombo = new Ext.form.ComboBox({
                fieldLabel: acMessage.get('ui.accesscontrol.isvalid'),
                id: 'isValid',
                name: 'isValid',
                editable: false,
                store: ctYesnoStore,
                valueField: 'code',
                displayField: 'description',
                triggerAction: 'all',
                emptyText: message.get('message.combo.pleaseselect'),
                selectOnFocus: true,
				allowBlank: false,
                blankText: message.get('message.edit.noblank'),
                mode: 'local'
            });
			
			var isMacEnableCombo = new Ext.form.ComboBox({
                fieldLabel: acMessage.get('ui.accesscontrol.ismacenable'),
                id: 'isMacEnable',
                name: 'isMacEnable',
                editable: false,
                store: ctYesnoStore,
                valueField: 'code',
                displayField: 'description',
                triggerAction: 'all',
                emptyText: message.get('message.combo.pleaseselect'),
                selectOnFocus: true,
				allowBlank: false,
                blankText: message.get('message.edit.noblank'),
                mode: 'local'
            });
            
            Ext.onReady(function(){
                Ext.QuickTips.init();
                Ext.form.Field.prototype.msgTarget = 'side';
                
                var acUserXMLReader = new Ext.data.XmlReader({
                    record: 'item'
                }, [{
                        name: 'id',
                        mapping: 'id'
                    }, {
                        name: 'userName',
                        mapping: 'userName'
                    }, {
                        name: 'realName',
                        mapping: 'realName'
                    }, {
                        name: 'userPwd',
                        mapping: 'userPwd'
                    }, {
                        name: 'macAddress',
                        mapping: 'macAddress'
                    }, {
                        name: 'department',
                        mapping: 'department'
                    }, {
                        name: 'duty',
                        mapping: 'duty'
                    }, {
                        name: 'mobile',
                        mapping: 'mobile'
                    }, {
                        name: 'tel',
                        mapping: 'tel'
                    }, {
                        name: 'email',
                        mapping: 'email'
                    }, {
                        name: 'photoName',
                        mapping: 'photoName'
                    }, {
                        name: 'ctGender',
                        mapping: 'ctGender'
                    }, {
                        name: 'comment',
                        mapping: 'comment'
                    },{
						name: 'isValid',
						mapping: 'isValid'
					},{
						name: 'isMacEnable',
						mapping: 'isMacEnable'
					}]);
					
					var acUserLoader = new xmlLoader('../../servlet/AcUserServlet?action=11&id=' + idValue);
                
                	var acUserRecord = acUserXMLReader.readRecords(acUserLoader.getXml()).records[0];
					
					var itemTplMarkup = ['<table cellspacing="0" id="the-table" style="width: 100%;"><tbody>',
							'<tr><td style="background:#eeeeee; width: 20%;">',
							message.get('message.list.id'),
							'</td><td>{id}</td>',
							'<td style="background:#eeeeee;">',
							acMessage.get('ui.accesscontrol.username'),
							'</td><td>{userName}</td><td rowspan="5" width="165px"><img id="customImg" height="160" src="../../_temp/{photoName}"></td></tr>',
							'<tr><td style="background:#eeeeee;">',
							acMessage.get('ui.accesscontrol.realname'),
							'</td><td>{realName}</td>',
							'<td style="background:#eeeeee;">',
							acMessage.get('ui.accesscontrol.ctgender'),
							'</td><td>{ctGender}</td></tr>',
							'<tr><td style="background:#eeeeee;">',
							acMessage.get('ui.accesscontrol.mac'),
							'</td><td>{macAddress}</td>',
							'<td style="background:#eeeeee;">',
							acMessage.get('ui.accesscontrol.department'),
							'</td><td>{department}</td></tr>',
							'<tr><td style="background:#eeeeee;">',
							acMessage.get('ui.accesscontrol.duty'),
							'</td><td colspan="3">{duty}</td></tr>',
							'<tr><td style="background:#eeeeee;">',
							message.get('message.edit.comment'),
							'</td><td colspan="3">{comment}</td></tr>',
						'</tbody></table>'];
	                var itemTpl = new Ext.Template(itemTplMarkup);
	                itemTpl.append('acUser', acUserRecord.data);
					
					isValidCombo.setValue(acUserRecord.data.isValid);
					isMacEnableCombo.setValue(acUserRecord.data.isMacEnable);
					
					acUserActionForm = new Ext.FormPanel({
	                    labelAlign: 'left',
	                    url: '../../servlet/AcUserServlet?action=200',
	                    frame: true,
	                    title: acMessage.get('ui.accesscontrol.edituseraction'),
	                    bodyStyle: 'padding:5px 5px 5px 5px;margin-top: 2px;',
	                    width: '100%',
	                    labelWidth: 140,
						items: [{
	                        id: 'id',
	                        name: 'id',
	                        xtype: 'hidden',
							value: idValue
	                    }, {
	                        layout: 'column',
	                        items: [{
	                            columnWidth: .5,
	                            layout: 'form',
	                            items: [isValidCombo]
                        	},{
	                            columnWidth: .5,
	                            layout: 'form',
	                            items: [isMacEnableCombo]
	                        }]
						},{
							fieldLabel: acMessage.get('ui.accesscontrol.selectresource'),
							id: 'ids',
	                        name: 'ids',
	                        xtype: 'textfield',
	                        width: '90%',
							readOnly: true,
							emptyText: message.get('message.combo.pleaseselect'),
	                        listeners: {
	                            'render': {
	                                fn: function(){
	                                    Ext.getCmp('ids').getEl().on('click', function(){
	                                        selectAcAction();
	                                    }, this);
	                                },
	                                scope: this
	                            }
	                        }
						}],
	                    
	                    buttons: [{
	                        text: message.get('message.edit.save'),
	                        handler: function(){
								var isValid = isValidCombo.getValue();
								var isMacEnable = isMacEnableCombo.getValue();
								document.getElementsByName('isValid')[0].value = isValid;
								document.getElementsByName('isMacEnable')[0].value = isMacEnable;
	                            if (acUserActionForm.getForm().isValid()) {
	                                acUserActionForm.getForm().submit({
	                                    method: 'post',
	                                    success: function(form, action){
	                                        messageTip.msg(message.get('message.tip'), message.get('message.edit.successful'));
											
											isValidCombo.setValue(isValid);
											isMacEnableCombo.setValue(isMacEnable);
											acUserActionListStore.reload();
	                                    },
	                                    failure: function(form, action){
	                                        messageTip.msg(message.get('message.tip'), message.get('message.edit.unsuccessful'));
	                                    }
	                                });
	                            }
	                        }
	                    }, {
	                        text: message.get('message.edit.cancel'),
	                        handler: function(){
	                            if (startPage != null) {
	                                window.location = 'ac_user_action_list.html?startPage=' + startPage;
	                            }
	                            else {
	                                window.location = 'ac_user_action_list.html';
	                            }
	                        }
	                    }]
	                });
					
					acUserActionForm.render('acUserActionForm');
					
					acUserActionListStore = new Ext.data.Store({
	                    url: '../../servlet/AcUserServlet?action=201&id=' + idValue,
	                    
	                    reader: new Ext.data.XmlReader({
	                        record: 'item',
	                        id: 'id',
	                        totalRecords: 'itemTotal'
	                    }, [ 
	                    'index', 'id', {name: 'acAction.actionUrl', mapping: 'actionUrl'},  {name: 'acAction.actionNameEn', mapping: 'actionNameEn'},{name: 'acAction.actionNameFr', mapping: 'actionNameFr'},{name: 'acAction.actionNameCn', mapping: 'actionNameCn'}, 'acUserActionId']),
	                    
	                    remoteSort: true
	                });
					
					var acUserActionFilters = new Ext.grid.GridFilters({
					  filters:[
					    {type: 'string',  dataIndex: 'acAction.actionUrl'},
						{type: 'string',  dataIndex: 'acAction.actionNameFr'},
						{type: 'string',  dataIndex: 'acAction.actionNameCn'},
						{type: 'string',  dataIndex: 'acAction.actionNameEn'}
					]});
					
					acUserActionGrid = new Ext.grid.GridPanel({
	                    title: acMessage.get('ui.accesscontrol.listuseraction'),
	                    store: acUserActionListStore,
						stripeRows: true,
						plugins: acUserActionFilters,
	                    height: 360,
	                    columns: [{
	                        header: message.get('message.list.id'),
	                        dataIndex: 'index'
	                    }, {
	                        header: acMessage.get('ui.accesscontrol.actionurl'),
	                        dataIndex: 'acAction.actionUrl',
							sortable: true
	                    }, {
	                        header: message.get('message.edit.fr'),
	                        dataIndex: 'acAction.actionNameFr',
							sortable: true
	                    },{
	                        header: message.get('message.edit.cn'),
	                        dataIndex: 'acAction.actionNameCn',
							sortable: true
	                    },  {
	                        header: message.get('message.edit.en'),
	                        dataIndex: 'acAction.actionNameEn',
							sortable: true
	                    },{
	                        header: message.get('message.list.delete'),
	                        dataIndex: 'id',
	                        renderer: renderDelete
	                    }],
	                    viewConfig: {
	                        forceFit: true
	                    },
	                    loadMask: true,
	                    renderTo: 'acUserActionList'
	                });
					
					acUserActionListStore.load();
					
					function renderDelete(value, p, record){
                    	return String.format('<a href="javascript: deleteItem(deleteCallback, {0});"><img src="../../images/icons/delete.png" title="' + message.get('message.list.delete') + '"/></a>', record.data.acUserActionId);
                	}
                
            });
			
			var selectAcActionCallBack = function(selectedIds){
				document.getElementById('ids').value = selectedIds;
			};
			
			var deleteCallback = function(btn){
                if (btn == 'yes') {
                    Ext.Ajax.request({
                        url: '../../servlet/AcUserServlet?action=202&id=' + deleteId,
                        success: function(o){
                            if (o.responseText == 'success') {
                                acUserActionListStore.reload();
                                messageTip.msg(message.get('message.tip'), message.get('message.delete.successful'));
                            }
                            else {
                                messageTip.msg(message.get('message.tip'), message.get('message.delete.unsuccessful'));
                            }
                        },
                        failure: function(o){
                            messageTip.msg(message.get('message.tip'), message.get('message.delete.failure'));
                        },
                        params: {
                            foo: 'bar'
                        }
                    });
                }
            }
        </script>
    </head>
    <body>
        <div id="acUser"></div>
		<div id="acUserActionForm"></div>
		<div id="acUserActionList"></div>
    </body>
</html>
